<template>
  <div class="app-container">
    <el-row :gutter="24">
      <!--用户数据-->
      <el-col :span="24" :xs="24">
        <el-table v-loading="load" :data="tableData"
                  style="width: 100%"
                  row-key="path"
                  lazy
                  :load="loadData"
                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}" >

          <el-table-column label="文件名" align="left" prop="name">
            <template slot-scope="scope">
              <i class="el-icon-folder" v-if="scope.row.directory" style="margin-right: 5px;"></i>
              <i class="el-icon-document" v-else style="margin-right: 5px;"></i>
              {{scope.row.name}}
            </template>
          </el-table-column>
          <el-table-column label="大小" align="center" prop="size" :show-overflow-tooltip="true"/>
          <el-table-column label="最后修改时间" align="center" prop="modifyTime" :show-overflow-tooltip="true"/>
          <el-table-column
            label="操作"
            align="center"
            width="160"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="openDialog(scope.row)" v-if="!scope.row.directory"
              >查看
              </el-button>

              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete" @click="handleDelete(scope.row,scope.$index)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import {listLog, deleteLog,getData} from "@/api/monitor/logFile";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";

  export default {
    name: "Log",
    data() {
      return {
        //文件内容
        content: "",
        defaultProps: {
          children: "children",
          label: "name",
          isLeaf: "leaf",
        },
        // 查询参数
        queryParams: {
          path: undefined,
        },
        datasParams: {
          path: "",
        },
        dataParmas: {
          path: "",
          name: "",
        },
        tableData: [],
        dataTree: {},
        load:true
      };
    },
    created() {
      console.log(this.$route)
      this.getList();
    },
    methods: {
      getList(){
        this.tableData = [];
        this.load = true;

        getData({}).then(response => {
          var rows = response.rows;
          rows.forEach(item => {
            if (!item.directory) {
              delete item.children;
            }
          });

          this.tableData = rows;
          this.load = false;
        });
      },
      //log或txt页面跳转查看方法
      openDialog(data) {
        // this.open=true
        this.dataParmas.path = data.path;
        this.dataParmas.name = data.name;
        let index = data.name.lastIndexOf('.');
        let suffix = data.name.substr(index + 1);

        if (index != -1 && (suffix == 'log' || suffix == 'txt')) {
          var location = '/monitor/fileLog/detail';
          this.$router.push({'path':location, name:'FileLog/detail', 'query': {name: data.path, id: data.name}})

        } else {
          this.$message("只能查看log或txt文件")
        }
      },
      //树结构懒加载实现
      getOrgList(node, resolve) {
        if (node.level == 0) {
          let dataTree = [];
          listLog(this.dataParmas).then(response => {

            response.data.forEach(item => {
              // console.log("获取数据", item);
              if (item.childSize > 0) {
                item.leaf = false;
              } else {
                item.leaf = true
              }
              dataTree.push(item)

            });
            // console.log("data---", dataTree);
            resolve(dataTree)
          });
        } else {
          let d = [];
          this.dataParmas.path = node.data.path;
          listLog(this.dataParmas).then(response => {

            response.data.forEach(item => {
              if (item.childSize > 0) {
                item.leaf = false;
              } else {
                item.leaf = true;
              }
              d.push(item)
            });
            resolve(d)
          });
        }
      },
      //树结构点击事件右侧列表数据展示
      handleNodeClick(node) {
        this.datasParams.path = node.path;
        listLog(this.datasParams).then(response => {
          this.datas = response.data
        })
      },

      loadData(tree, treeNode, resolve) {

        getData({'path':tree.path}).then(response => {
          var rows = response.rows;
          rows.forEach(item => {
            if (item.childSize == 0) {
              delete item.children;
            }
          });
          resolve(rows)
        });

      },

      //删除日志文件
      handleDelete(row,index){
        console.log(row,this.tableData[index],index)

        this.$confirm('是否确认删除文件为"' + row.name + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return  deleteLog({path:row.path});
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function() {});

      }
    }
  };
</script>


